/*
*
*
原因：当js文件放在head里面时，如果绑定了onclick或者onmouseover事件，就会出现如上图类似的错误，是因为浏览器的加载你写的html文档的顺序是从上往下，加载完按钮节点才执行的js，所以当浏览器自顶向下解析时，找不到onclick绑定的按钮节点，于是报错。

解决办法：第一，把js文件放在底部加载；第二，使用window.onload=function(){}包裹js内容。

在这里我选一种方案
*
* 	
*/





/*
*
*

	这里都是关于 sidebar 中 鼠标移入移出事件,操作

*
*
*/




// 设置信号量 
let semaphore  = 0;

let mutex = 0;

let current_element = null;

// 记录当前那个元素被点击
let current_click = [];

// 获取 EA Play 元素
let EAplay_select = document.getElementsByClassName('EAplay_select')[0];

// 获取 隐藏的 EA play 元素
let EA_play = document.getElementsByClassName('EA_play')[0];

// 获取 "浏览游戏" 元素
let Browse_select = document.getElementsByClassName('Browse_select')[0];

// 获取 "特卖" 元素
let Sale_select = document.getElementsByClassName('sale_select')[0];


/*
*	为 EAplay_select 设置鼠标点击事件事件: 显示 EA_play 元素,添加节流函数 throttle(base.js), 是通过添加类名实现元素显示 (base.js)	
*/

const show_EAplay_select = function(){

	if (current_click.length==1) {
		//当 已经橙色左边框已经显示的时候, 去除当前显示的边框, 并把储存空间清空 (通过类名删除背景)
		ClearSelection();

	}else if (current_click.length==0) {
		//当 没有橙色边框显示, 显示当前点击元素的橙色边框 (通过类名添加背景)
		ShowOrange(EAplay_select);
		addClassName(EA_play,'visible');
	}
}

addEventListener(EAplay_select,'click',show_EAplay_select,true);


/*
*	为 Browse_select 设置鼠标点击事件事件
*/

const show_Browse_select = function(){

	if (current_click.length==1) {
		//当 已经橙色左边框已经显示的时候, 去除当前显示的边框, 并把储存空间清空 (通过类名删除背景)
		ClearSelection();

	}else if (current_click.length==0) {
		//当 没有橙色边框显示, 显示当前点击元素的橙色边框 (通过类名添加背景)
		ShowOrange(Browse_select);

	}
}

addEventListener(Browse_select,'click',show_Browse_select,true);


/*
*	为 sale_select 设置鼠标点击事件事件
*/

const show_sale_select = function(){

	if (current_click.length==1) {
		//当 已经橙色左边框已经显示的时候, 去除当前显示的边框, 并把储存空间清空 (通过类名删除背景)
		ClearSelection();
	}else if (current_click.length==0) {
		//当 没有橙色边框显示, 显示当前点击元素的橙色边框 (通过类名添加背景)
		ShowOrange(Sale_select);

	}
}

addEventListener(Sale_select,'click',show_sale_select,true);


/*
*	设 Orange_border 橙色边框的宽度为0 
*/
const hide_order = function(e){
	e.style.width= 0;
}


/*
*	为所有点击事件 ( 橙色左边框已经显示,再次点击取消上次选中)
*/
const ClearSelection = function(e){
	//当 已经橙色左边框已经显示的时候, 去除当前显示的边框, 并把储存空间清空 (通过类名删除背景)
	if(current_click[0].className.search('EAplay_select')==0){
		addClassName(EA_play,'EA_play_hide');
		setTimeout(function(){
			delClassName(EA_play,'EA_play_hide');
			delClassName(EA_play,'visible');
		},490);
	}
	hide_order(current_click[0].firstElementChild);
	delClassName(current_click[0],'Orange_border_bc');
	current_click.shift();
}


/*
*	为所有点击事件 ( 可以显示橙色左边框 '但' 没有显示的,显示)
*/
const ShowOrange = function(e){
	//当 没有橙色边框显示, 显示当前点击元素的橙色边框 (通过类名添加背景)
	addClassName(e,'Orange_border_bc');
	current_click.push(e);
	e.firstElementChild.style.width=6+'px';
}